<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ice="http://www.icesoft.com/icefaces/component"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
    </h:head>
    <h:body>

        <ui:composition template="./template/template.xhtml">
            <ui:define name="content">

                <!--logged-->
                <ice:panelGroup rendered="#{userManager.loggedIn}">
                    <ice:panelGroup rendered="#{!(tableBean.tableExist)}" >
                        <center>Table has been cancelled. Please Return to Home<br/>
                            <h:form>
                                <ice:commandLink value="Home" action="home" />
                            </h:form>
                        </center>
                    </ice:panelGroup>
                    <ice:panelGroup rendered="#{tableBean.tableExist}" >
                        <div id="background" style="background: url(./resources/images/table.png); width:860px; height: 702px" >

                            <!-- AVATARS, NICKNAMES & CARDS -->

                            <!--PLAYER 2-->
                            <div id="player1AvatarChat" style="position: relative; top: 17px; left: 306px; width: 250px;">
                                <table width="250">
                                    <tr>
                                        <td colspan="2" style="text-align: center; font-weight: bold;">
                                            <ice:outputText value="#{tableBean.player2Name}"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <ice:graphicImage value="#{tableBean.player2Avatar}"/>
                                        </td>
                                        <td align="center" style=" text-align: center;" >
                                            <ice:graphicImage value="#{tableBean.player2Cards}"/>
                                        </td>
                                    </tr>
                                </table>
                            </div>


                            <!-- PLAYER 1-->
                            <div id="player2AvatarChat" style="position: relative; top: 8px; left: 20px;">
                                <table width="250">
                                    <tr>
                                        <td colspan="2" style="text-align: left; font-weight: bold;">
                                            <ice:outputText value="#{tableBean.player1Name}"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <ice:graphicImage value="#{tableBean.player1Avatar}"/>
                                        </td>
                                        <td align="center" style=" text-align: center;" >
                                            <ice:graphicImage value="#{tableBean.player1Cards}"/>
                                        </td>
                                    </tr>
                                </table>
                            </div>


                            <!--PLAYER 3-->
                            <div id="player3AvatarChat" style="position: relative; top: -93px; left: 590px; width: 220px;">
                                <table width="250">
                                    <tr>
                                        <td colspan="2" style="text-align: right; font-weight: bold;">
                                            <ice:outputText value="#{tableBean.player3Name}"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <ice:graphicImage value="#{tableBean.player3Avatar}"/>
                                        </td>
                                        <td align="center" style=" text-align: center;" >
                                            <ice:graphicImage value="#{tableBean.player3Cards}"/>
                                        </td>
                                    </tr>
                                </table>
                            </div>


                            <!--PLAYER 4-->
                            <div id="player4AvatarChat" style="position: relative; top: 232px; left: 80px;">
                                <table width="250">
                                    <tr>
                                        <td colspan="2" style="text-align: center; font-weight: bold;">
                                            <ice:outputText value="#{tableBean.player4Name}"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <ice:graphicImage value="#{tableBean.player4Avatar}"/>
                                        </td>
                                        <td align="center" style=" text-align: center;" >
                                            <ice:panelGroup rendered="#{!tableBean.full}">
                                                <ice:panelGroup rendered="#{userManager.watching}">
                                                    <ice:form id="sit">
                                                        <ice:commandLink actionListener="#{tableBean.playOnTable()}" > <ice:graphicImage value="./resources/images/sit_button.png"/>
                                                        </ice:commandLink>
                                                    </ice:form>
                                                </ice:panelGroup>
                                                <ice:panelGroup rendered="#{userManager.waiting}">
                                                    <ice:graphicImage value="#{tableBean.player4Cards}"/>
                                                </ice:panelGroup>
                                            </ice:panelGroup>
                                            <ice:panelGroup rendered="#{tableBean.full}">
                                                <ice:graphicImage value="#{tableBean.player4Cards}"/>
                                            </ice:panelGroup>

                                        </td>
                                    </tr>
                                </table>

                            </div>

                            <!-- PULSANTE PER LASCIARE IL TAVOLO -->
                            <div style ="position: relative; top:224px; left: 145px; width: 300px;">
                                <ice:form  id="leaveTable">
                                    <ice:commandLink action="#{tableBean.leaveTable()}" >
                                        <ice:graphicImage value="./resources/images/leave_button.png"/>
                                    </ice:commandLink>
                                </ice:form>

                            </div>

                            <!-- PULSANTE CHAT -->
                            <div  style="position: relative; top: 194px; left: 536px; width: 305px;">
                                <ice:form id="chat">
                                    <ice:inputText styleClass="chatform" value="#{tableBean.messageChat}" style="width: 200px" action="#{tableBean.sendMessage}" />
                                    <ice:commandLink id="buttonSave" action="#{tableBean.sendMessage}">
                                        <ice:graphicImage value="./resources/images/send_button.png" style="vertical-align:middle; padding-left: 5px;"/>
                                    </ice:commandLink>
                                </ice:form>
                            </div>



                            <!-- CENTER TABLE -->
                            <div  style="position: relative; top: -160px; left:286px; width: 305px; font-weight: bold; text-align: center;">
                                <ice:outputText value="#{tableBean.message}" rendered="#{!tableBean.fourCards}"/>
                                <ice:outputText value="The turn is over. Click on End Turn" rendered="#{tableBean.fourCards}"/>

                            </div>

                            <!-- CARTA GIOCATORE 2 -->
                            <div  style="position: relative; top: -260px; left: 413px; width: 80px; height: 61px;">
                                <ice:panelGroup rendered="#{tableBean.started}">
                                    <ice:graphicImage value="#{tableBean.player2Table}" />
                                </ice:panelGroup>
                            </div>

                            <!-- CARTA GIOCATORE 1 -->
                            <div  style="position: relative; top: -260px; left: 250px; width: 80px; height: 61px;">
                                <ice:panelGroup rendered="#{tableBean.started}">
                                    <ice:graphicImage value="#{tableBean.player1Table}" />
                                </ice:panelGroup>
                            </div>

                            <!-- CARTA GIOCATORE 3 -->
                            <div  style="position: relative; top: -321px; left: 570px; width: 80px; height: 61px;">
                                <ice:panelGroup rendered="#{tableBean.started}">
                                    <ice:graphicImage value="#{tableBean.player3Table}" />
                                </ice:panelGroup>
                            </div>

                            <!-- CARTA GIOCATORE 4 -->
                            <div  style="position: relative; top: -330px; left: 414px; width: 80px; height: 61px;">
                                <ice:panelGroup rendered="#{tableBean.started}">
                                    <ice:graphicImage value="#{tableBean.player4Table}" />
                                </ice:panelGroup>
                            </div>


                            <!-- CARDS PLAYER -->
                            <div style="position: relative; top: -303px; left: 160px; width:560px; height: 66px; text-align: center;">
                                <ice:panelGroup rendered="#{tableBean.started}">
                                    <ice:panelGroup rendered="#{tableBean.userIsPlaying}" >
                                        <h:form>
                                            <ui:repeat value="#{tableBean.cardsPlayer}" var="current2" >
                                                <ice:commandLink actionListener="#{tableBean.play(current2)}" rendered="#{tableBean.playable(current2)}">
                                                    <ice:graphicImage  styleClass="highlightitClick" value="#{tableBean.fromCardToURL(current2)}" />
                                                </ice:commandLink>

                                                <ice:graphicImage styleClass="highlightit" value="#{tableBean.fromCardToURL(current2)}" rendered="#{!(tableBean.playable(current2))}" />

                                            </ui:repeat>
                                        </h:form>
                                    </ice:panelGroup>
                                </ice:panelGroup>


                            </div>
                            <!-- PULSANTE PER IL FINE TURNO -->
                            <div style="position: relative; top: -190px; left: 345px; width:170px;">
                                <ice:panelGroup rendered="#{tableBean.started}">
                                    <ice:panelGroup rendered="#{tableBean.userIsPlaying}">
                                        <ice:panelGroup rendered="#{tableBean.cardsOnTable}" >
                                            <ice:form>
                                                <ice:commandLink action="#{tableBean.endTurn()}" >
                                                    <ice:graphicImage value="./resources/images/end_button.png"/>
                                                </ice:commandLink>
                                            </ice:form>
                                        </ice:panelGroup>
                                    </ice:panelGroup>
                                </ice:panelGroup>
                            </div>
                        </div>

                        <!-- TABLE -->
                        
 
                    </ice:panelGroup>
                    <ice:panelGroup rendered="#{tableBean.started}">
                        <ice:panelGroup rendered="#{!tableBean.youLose}" >
                        <div id="music" style=" text-align: center; width: 100%;  ">
                            <object type="application/x-shockwave-flash" data="../resources/media/dewplayer-mini.swf" width="160" height="20" id="dewplayer" name="dewplayer">
                                <param name="wmode" value="transparent" /><param name="movie" value="../resources/media/dewplayer-mini.swf" />
                                <param name="flashvars" value="mp3=../resources/media/music.mp3&amp;autostart=1&amp;autoreplay=1&amp;volume=65" />
                            </object>

                        </div>
                    </ice:panelGroup>
                    </ice:panelGroup>
                    <ice:panelGroup rendered="#{tableBean.started}">
                        <ice:panelGroup rendered="#{tableBean.youLose}" >
                        <div id="music" style=" text-align: center; width: 100%;  ">
                            <object type="application/x-shockwave-flash" data="../resources/media/dewplayer-mini.swf" width="160" height="20" id="dewplayer" name="dewplayer">
                                <param name="wmode" value="transparent" /><param name="movie" value="../resources/media/dewplayer-mini.swf" />
                                <param name="flashvars" value="mp3=../resources/media/youLose.mp3&amp;autostart=1&amp;autoreplay=1&amp;volume=65" />
                            </object>

                        </div>
                        </ice:panelGroup>
                    </ice:panelGroup>

                    <!-- CHATTE MESSAGGI -->
                    <div style="position: relative; top: -160px; left: 540px; height:105px; overflow-y:auto; overflow-x: hidden; width: 310px; vertical-align: top;" id="chatTable" >
                        <ice:panelGroup style="vertical-align: top" rendered="#{tableBean.tableExist}" >
                        
                            <ice:dataTable value="#{tableBean.textList}" var="current" style="vertical-align: bottom" >
                                <ice:column>
                                    <script type="javascript">
                                        var objDiv = document.getElementById("chatTable");
                                        objDiv.scrollTop = objDiv.scrollHeight;
                                    </script>
                                    <ice:outputText value="#{current.text}"/>
                                </ice:column>
                            </ice:dataTable>
                        
                    </ice:panelGroup>
                        </div>

                </ice:panelGroup>
                <ice:panelGroup rendered="#{userManager.chatting}">
                    <ice:form id="tableNotPlayed">
                        <center>You can't stay here. Go back to home and join/create a table<br/>
                            <ice:commandLink value="General Lobby" action="chat" /></center>
                    </ice:form>
                </ice:panelGroup>
                <!--not logged-->

                <ice:panelGroup rendered="#{!userManager.loggedIn}">
                    <ice:form id="logIN">
                        <center>You are not Logged in. Please login. <br/>
                            <ice:commandLink value="Login" action="login" /></center>
                    </ice:form>
                </ice:panelGroup>

            </ui:define>
        </ui:composition>

    </h:body>
</html>

